<!--
You are free to copy and use this sample in accordance with the terms of the
Apache license (http://www.apache.org/licenses/LICENSE-2.0.html)
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>
      Google Visualization API Sample
    </title>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
    
    
    var chart;
		var data;
    var options = {};

    var view;
    var min;
    var max;
		var totalRows;    
				
    function changeView(){
			var rows = '[';
			
			for(var i=min;i<max;i++){
				if(i==(max-1)){
					rows+=i;
				}else{
					rows+=i+',';
				}
			}
			rows+=']';
			view.setRows(eval(rows));
		
			chart.draw(view, options);
		}


    function drawVisualization() {
			var parameters = unescape(window.location.href.slice(window.location.href.indexOf('?') + 1));
			var json = eval ('(' + parameters + ')');		
			totalRows = json.length;
			min = 0;
	 		max = totalRows;
	 		console.log(totalRows);
			
      // Create and populate the data table.
      var data = new google.visualization.DataTable();
			data.addColumn('string', 'x');
      data.addColumn('number', 'Lines removed');
      data.addColumn('number', 'Lines added');
      data.addColumn('number', 'Lines total');
			
			for (var i=0; i< totalRows; i++) {
				// console.log(json[i].x+"/"+json[i].linesRemoved+"/"+json[i].linesAdded+"/"+json[i].linesTotal);		
				data.addRow([json[i].x, -json[i].linesRemoved, json[i].linesAdded, json[i].linesTotal]);
			}
       
      // Create and draw the visualization.
      chart = new google.visualization.LineChart(document.getElementById('visualization'));
  	  // Create a view
	 		view = new google.visualization.DataView(data);

      options.title = "Lines Added / removed / total per revision";
      options.width= window.innerWidth-50;
			options.height= window.innerHeight-150;			
			options.vAxis = {maxValue: 10};
			options.lineWidth = 2;
			options.pointSize = 7;
  
			changeView();
    }

    google.setOnLoadCallback(drawVisualization);
    
    function moveGraph(dir) {
    	min+=dir;
    	max+=dir;
    	try{
    		changeView();    		
    	}catch(err){
	    	if(max>totalRows){
	    		min= totalRows-max+min;
	    		max=totalRows;
	    	}
	    	if(min<0){
	    		max= max-min;
	    		min=0;	
	    	}
	  	}
    }
     
    function changeScale(val){
    	if(val == "all"){
    		min = 0;
    		max = totalRows;
    	}else{
    		max = min + eval(val);
    	}
			changeView();
    }
    
    
    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <select onchange="changeScale(this.value)">
	  <option value="all">all</option>
	  <option value="10">10</option>
	  <option value="25">25</option>
	  <option value="50">50</option>
	  <option value="100">100</option>
	</select>
    <input type="button" value="<--" onclick="moveGraph(-10)" />
    <input type="button" value="-->" onclick="moveGraph(10)" />
    <div id="visualization"></div>
  </body>
</html>
​